<template>
  <el-row>
    <!-- 右侧可以拖拽的组件 -->
    <draggable
      v-if="draggable && draggable.groupName"
      class="com"
      :style="{
            width: '100%',
            height: '100%',
            overflow:'hidden'
        }"
      :no-transition-on-drag="true"
      :group="{ name: draggable.groupName }"
      v-for="(draggable) in draggableList"
      :key="generateUUID()"
    >
      <el-col v-for="(item, index) in draggable.components" :span="draggable.span"
              :key="index"
              style="overflow: hidden">
        <component
          class="com"
          :class="{active: current === index}"
          :is="item && item.is"
          v-bind="item && item.props"
          :key="generateUUID()"
        ></component>
      </el-col>
    </draggable>
  </el-row>
</template>

<script>
import draggable from 'vuedraggable';
import SButton from "@/components/component/s-button";
import SInput from "@/components/component/s-input";

export default {
  name: "sDraggable",
  components: {
    draggable,
    SInput,
    SButton
  },
  props: {
    // 区分不同大类型 autocomplete input
    draggableList: {
      type: Array,
      default: () => [
        {
          groupName: '',  // 确保 groupName 存在
          components: []
        }
      ]
    }
  },
  data() {
    return {
      current: 0
    }
  },
  methods: {
    handleEnd(item) {

    },
    handleChange(e) {
      console.log("e=======>\n" + e)
    },
    handleAddCom() {
      let input = {
        _id: 'C' + Math.floor(Math.random() * 1000),
        is: 's-input',
        props: {
          _id: 'C' + Math.floor(Math.random() * 1000),
          title: '添加',
          attr: 'input',
          type: 'input',
          triggerOnFocus: true,
          disabled: false,
          precision: 2,
          restUrl: '123',
          styleProps: (
            {
              width: '100%'
            }
          )
        }
      }
      // this.com.push(input)
    },
    generateUUID() {
      let d = new Date().getTime(); // 当前时间戳
      let d2 = (performance && performance.now && (performance.now() * 1000)) || 0; // 高精度时间戳
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        let r = Math.random() * 16; // 随机数
        if (d > 0) {
          r = (d + r) % 16 | 0;
          d = Math.floor(d / 16);
        } else {
          r = (d2 + r) % 16 | 0;
          d2 = Math.floor(d2 / 16);
        }
        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16); // 按照UUID规范生成
      });
    }
  }
}
</script>


<style scoped>
.com {

}

.com:hover {
  cursor: move;
  z-index: 1;
  outline: 1px dashed #2ec79c !important;
}

/*.com:hover .active {*/
/*  z-index: 9;*/
/*  outline: 2px solid #2ec79c !important;*/
/*}*/
</style>

